<template>
  <div class="hello">
   		<header>
   					<van-row type="flex" justify="space-between">
						  <van-col span="4" tag="em" @click="goback">首页</van-col>
						  <van-col span="2">三</van-col>
						</van-row>
   		</header>
			
			<section>
					<router-view ></router-view>
			</section>
			
			<footer>
					<van-tabbar
					  v-model="active"
					  active-color="#07c160"
					>
					  <van-tabbar-item icon="home-o" to="/homePage">首页</van-tabbar-item>
					  <van-tabbar-item icon="search" to="/discover">发现</van-tabbar-item>
					  <!--<van-tabbar-item icon="service-o" to="/librarys">乐库</van-tabbar-item>-->
					  <van-tabbar-item icon="manager-o" to="/myself">我的</van-tabbar-item>
					</van-tabbar>
			</footer>
  </div>
</template>

<script>
	import {Tabbar, TabbarItem,Row,Col} from 'vant';

export default {
  name: 'HelloWorld',
  components:{
         [Tabbar.name]:Tabbar,
         [TabbarItem.name]:TabbarItem,
         [Row.name]:Row,
         [Col.name]:Col
      },
  data () {
    return {
      show:false,
      value:3,
      radio: '1',
      active:0
    }
  },
  methods:{
  	goback(){
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
		.hello{
	height: 100vh;
	display: flex;
	flex-direction: column;
}
header{
	position: relative;
	height: 40px;
	background: #f1f1f1;
	color: #a1a1a1;
	font-size: 18px;
}
	section{
	flex: 1;
	overflow: auto;
	padding: 0 4px;
}

footer{
	display: flex;
	justify-content: space-between;
	height: 50px;
	background: #f1f1f1;
	text-align: center;
	line-height: 50px;
	color: #8C8C8C;
	font-size: 18px;
}
</style>
